<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选题</title>
</head>
<body>
  <div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'west',title:'题类',split:true,hideCollapsedContent:false" style="width:240px;">
      <ul id="multiple_choice_questions_tree_20210418"></ul>
    </div>
    <div data-options="region:'center',border:true">
      <table id="multiple_choice_questions_dg_20210418"></table>
    </div>
  </div>

  <div id="tb_multiple_choice_questions_dg_20210418" style="padding:2px 5px;">
    <a href="javascript:" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="$('#dialog_20210419_addOrUpdateOrAdd').dialog('open').dialog('center').dialog('setTitle','添加多选题')">添加</a>
    <a href="javascript:" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
    <a href="javascript:" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    Date From: <input class="easyui-datebox" style="width:110px">
    To: <input class="easyui-datebox" style="width:110px">
    难易度:
    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
      <option value="中等">中等</option>
      <option value="简单">简单</option>
      <option value="难">难</option>
    </select>
    <a href="javascript:" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
  </div>

  <div id="dialog_20210419_addOrUpdateOrAdd" style="padding:10px 10px;display: none;">
    <form id="form_20210419_addOrUpdateOrAdd" method="post">
      <div style="margin-bottom:20px">
        <table> <tr> <td width="80">题目：</td> <td><textarea name="editorTitleChecked" id="editorTitleChecked"> </textarea></td> </tr> </table>
      </div>
      <div style="margin-bottom:20px">
        <table> <tr> <td width="80">选项A：</td> <td><textarea name="editorCheckedA" id="editorCheckedA"> </textarea></td> </tr> </table>
      </div>
      <div style="margin-bottom:20px">
        <table> <tr> <td width="80">选项B：</td> <td><textarea name="editorCheckedB" id="editorCheckedB"> </textarea></td> </tr> </table>
      </div>
      <div style="margin-bottom:20px">
        <table><tr><td width="80">选项C：</td><td><textarea name="editorCheckedC" id="editorCheckedC"> </textarea></td></tr></table>
      </div>
      <div style="margin-bottom:20px">
        <table> <tr> <td width="80">选项D：</td> <td><textarea name="editorCheckedD" id="editorCheckedD"> </textarea></td> </tr> </table>
      </div>
      <div style="margin-bottom:20px">
        <table border="0" width="100%">
          <tr>
            <td width="30%">
              <select class="easyui-combobox" name="answer" id="answer" label="正确答案：" style="width:180px;" data-options="panelHeight:'auto',multiple:true,required:true" >
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
              </select>
            </td>
            <td  width="30%">
              <select class="easyui-combobox" name="nanduxishu" id="nanduxishu" label="题的难度：" data-options="panelHeight:'auto',required:true" >
                <option value="1">简单</option>
                <option value="2">中等</option>
                <option value="3">难</option>
              </select>
            </td>
            <td  width="30%">
              <input class="easyui-switchbutton" checked name="status" id="status" label="状态：" labelWidth="50" data-options="onText:'正常',offText:'停用'" style="margin-right: 0px;">
            </td>
          </tr>
        </table>
      </div>
    </form>
  </div>
  <div id="dialog_20210419_addOrUpdateOrAdd_button" style="display: none;">
    <a id="submitForm20210419close" href="javascript:" >放弃</a>
    <a id="submitForm20210419" href="javascript:">保存</a>
  </div>

  <script>
    $(function (){
      CKEDITOR.replace( 'editorTitleChecked',{ height: 60 } );
      CKEDITOR.replace( 'editorCheckedA',{ height: 60 } );
      CKEDITOR.replace( 'editorCheckedB',{ height: 60 } );
      CKEDITOR.replace( 'editorCheckedC',{ height: 60 } );
      CKEDITOR.replace( 'editorCheckedD',{ height: 60 } );
    })

    $('#multiple_choice_questions_tree_20210418').tree({
      method:'get',
      url:'./../structure/queryTreeAll',
      onClick: function(node){
        //判断点击的是叶节点
        if($(this).tree('isLeaf',node.target)){
          $('#multiple_choice_questions_dg_20210418').datagrid({
            url:'../choiceQuestion/queryChoiceQuestionPid',
            queryParams: {
              pid: node.id,
              titleType:2
            }
          });
          return;
        }
      }
    });

    $('#multiple_choice_questions_dg_20210418').datagrid({
      method:'get',
      sortName:'id',
      sortOrder:'desc',
      fit:true,
      fitColumns:true,
      border:false,
      singleSelect:true,
      nowrap:false,//设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。
      columns:[[
        {field:'title',title:'题目',rowspan:2,width:160},
        {title:'选项',colspan:4},
        {field:'createTime',title:'创建时间',rowspan:2,width:80,align:'center'},
        {field:'answer',title:'正确答案',rowspan:2,width:40,align:'center'},
        {field:'nanduxishu',title:'难易度',rowspan:2,width:40,align:'center',
          formatter: function(value,row,index){
            if(value == '1'){
              return '简单';
            }
            if(value == '2'){
              return '中等';
            }
            if(value == '3'){
              return '难';
            }
          }
        },
        {field:'status',title:'状态',rowspan:2,width:40,align:'center',
          formatter: function(value,row,index){
            if(value == '1'){
              return '正常';
            }
            return '停用';
          }
        }
      ],[
        {field:'titleA',title:'A选',width:80,
          formatter: function(value,row,index){
            let titleABCD = row.titleABCD;
            let obj = eval('(' + titleABCD + ')');
            return obj.A;
          }
        },
        {field:'titleB',title:'B选',width:80,
          formatter: function(value,row,index){
            let titleABCD = row.titleABCD;
            let obj = eval('(' + titleABCD + ')');
            return obj.B;
          }},
        {field:'titleC',title:'C选',width:80,
          formatter: function(value,row,index){
            let titleABCD = row.titleABCD;
            let obj = eval('(' + titleABCD + ')');
            return obj.C;
          }
        },
        {field:'titleD',title:'D选',width:80,
          formatter: function(value,row,index){
            let titleABCD = row.titleABCD;
            let obj = eval('(' + titleABCD + ')');
            return obj.D;
          }
        }
      ]],
      toolbar:'#tb_multiple_choice_questions_dg_20210418',
      pagination:true,
      rownumbers:true
    });

    $(function (){
      $('#dialog_20210419_addOrUpdateOrAdd').dialog({
        width: '50%',
        height: '80%',
        closed: true,
        modal: true,
        onBeforeOpen: function (none){
          let treeSelect = $('#multiple_choice_questions_tree_20210418').tree('getSelected');
          if(treeSelect){
            if($('#multiple_choice_questions_tree_20210418').tree('isLeaf',treeSelect.target)){
              return true;
            }
          }
          new jBox('Notice', {
            color: 'red',
            autoClose: 2500,
            content: '请先选中科目！',
            showCountdown: true,
            animation: 'slide'
          });
          return false;
        },
        buttons:'#dialog_20210419_addOrUpdateOrAdd_button'
      });
    })

    $(function () {
      $('#submitForm20210419').linkbutton({
        iconCls: 'icon-ok',
        onClick: function (none) {
          submitFormChoice_question2021();
        }
      });
      $('#submitForm20210419close').linkbutton({
        onClick: function (none) {
          $('#dialog_20210419_addOrUpdateOrAdd').dialog('close');
        }
      });
    })
    //修改和保存
    function submitFormChoice_question2021(){
      let editorTitleChecked = CKEDITOR.instances.editorTitleChecked.getData();
      let editorCheckedA = CKEDITOR.instances.editorCheckedA.getData();
      let editorCheckedB = CKEDITOR.instances.editorCheckedB.getData();
      let editorCheckedC = CKEDITOR.instances.editorCheckedC.getData();
      let editorCheckedD = CKEDITOR.instances.editorCheckedD.getData();

      let editorJsonObject = {'A':editorCheckedA, 'B':editorCheckedB, 'C':editorCheckedC, 'D':editorCheckedD};
      let pid = $('#multiple_choice_questions_tree_20210418').tree('getSelected').id;

      let answer = $('#answer').combobox('getText');
      let nanduxishu = $('#nanduxishu').combobox('getValue');
      let status = $('#status').switchbutton('options').checked;
      if(status){
        status = 1;
      }else {
        status = 0;
      }

      $.ajax({
        type: 'POST',
        url: './../choiceQuestion/mergeChoiceQuestion',
        data: {pid:pid, title:editorTitleChecked,titleABCD:JSON.stringify(editorJsonObject), answer:answer, titleType:2, nanduxishu:nanduxishu, status:status },
        success: function(data){
          if(data.code == 200){
            new jBox('Notice', {
              color: 'green',
              autoClose: 2500,
              content: '保存成功。',
              showCountdown: true,
              animation: 'slide'
            });
            $('#dialog_20210419_addOrUpdateOrAdd').dialog('close');
            $('#multiple_choice_questions_dg_20210418').datagrid('load');
          }else{
            new jBox('Notice', {
              color: 'red',
              autoClose: 2500,
              content: '保存失败！',
              showCountdown: true,
              animation: 'slide'
            });
          }
        }
      });
    }
  </script>
</body>
</html>